// 会员详情页面

import React, {Component} from 'react';
import {Dimensions, StatusBar, Text, View, Image, TouchableWithoutFeedback, TouchableNativeFeedback, ScrollView, TouchableOpacity, StyleSheet, TextInput, FlatList, DeviceEventEmitter} from 'react-native';
import Modal from 'react-native-modalbox';


import CXIcon from '../../../style/icon/CXIcon';
import styles, {mainBackgroundColor, white} from "../../../style/global";
import ImagePicker from 'react-native-image-picker';
import {connect} from "react-redux";
import {is, fen_to_yuan} from '../../../utils';

import memberActions from '../../../store/actions/member';
import storeActions from '../../../store/actions/store';
import {bindActionCreators} from 'redux';
import Tips from "react-native-root-tips";
import {Actions} from "react-native-router-flux";
import { ToastAndroid } from 'react-native';



const options = {
    title: 'Select Avatar',
    storageOptions: {
        skipBackup: true,
        path: 'images',
    },
};
class memberDetailPage extends Component {
    constructor(props){
        super(props);
        this.couponPage = 1;
        this.state = {
            name:'',
            mobile:'',
            birthday:'',
            address:'',
            note:'',
            cardDate:'',
            vipLevel:'1',
            isMan:true,
            isEditable:true, //文本框是否能编辑,控制联系地址，备注信息
            isEdit:true,//控制电话，生日不可编辑
            currentBalance: '', // 当前选择的充值方案
            type:'',//区分是新增页面还是编辑页面还是详情页面
            hasMore:false,
            user_id: ''
        };
    }
    componentDidMount(){
        let {memberAction} = this.props;
        let type = this.props.type;
        let user_id =this.props.user_id;
        console.log('这个是我获取到的user_id', user_id, type);
        this.setState({
            type:type,
            user_id: user_id
        });
        if(type == 'add'){
            this.setState({
                isEditable:true,
                isEdit:true
            })
        } else if(type == 'detail'){
            this.setState({
                isEditable:false
            })
        }
        if(user_id){
            //需要请求充值列表
            memberAction.getUserBalanceList();
            //需要请求优惠券列表
            memberAction.getUserCouponList(1,user_id)
            //请求用户信息
            memberAction.getUserDetail(user_id, (res) => {
                if (res && res.status) {
                    this.setState({
                        name:res.data.nick_name,
                        mobile:res.data.mobile,
                        birthday:res.data.birthday,
                        address:res.data.city,
                    });
                    if (res.data.birthday) {
                        this.setState({
                            isEdit: false
                        }, () => {
                            console.log('这个是什么', this.state.isEdit);
                        })
                    }
                    if(res.data.sex == "先生"){
                        this.setState({
                            isMan:true
                        })
                    } else {
                        this.setState({
                            isMan:false
                        })
                    }
                }
            })
        //    监听事件
            this.listener = DeviceEventEmitter.addListener('hasMore',(hasMore)=>{
                this.setState({
                    hasMore:hasMore
                })
            })

        }
        this._currentTime();
    }
    componentWillUnmount() {
        if (this.listener)  {
            this.listener.remove();
        }
    }

    // 提交充值
    _submitBalanceOrder() {
        if (!this.state.currentBalance) {
            ToastAndroid.showWithGravity('请选择充值方案', ToastAndroid.SHORT, ToastAndroid.CENTER)
            return
        }
        let data = {
          user_id: this.state.user_id,
          recharge_rule_id: this.state.currentBalance.id
        };

        this._closeType();
        const { storeAction } = this.props;
        storeAction.submitBalanceOrder(data, (res) => {
            if (res && res.data) {
                Actions.push('BalanceCashPage', {
                    order_no: res.data.order.order_no
                });
            }
        } );
    }
    //加载更多
    _onLoadMore(){
        if(this.state.isLoadMore){
            this.couponPage = this.couponPage + 1;
            let {memberAction} = this.props;
            memberAction.getUserCouponList(this.page,this.props.user_id);
        }
    }
    //算当前时间
    _currentTime(){
        let nowDate = new Date();
        let year = nowDate.getFullYear();//年
        let month = nowDate.getMonth() + 1;//月
        let day = nowDate.getDate();//日
        let currentDate = year + '-' + month+  '-' + day
        this.setState({
            cardDate:currentDate
        })
    }

    _showLeftCouponModal() {
        console.log(Dimensions.get('window'));
        this.refs.leftCouponModal.open();
    }
    _closeLeftCouponModal() {
        this.refs.leftCouponModal.close();
    }

    _showType() {
        this.refs.searchModal.open();
    }
    _closeType() {
        this.refs.searchModal.close();
    }

    _uploadAvatar() {
        ImagePicker.showImagePicker(options, res => {
            //处理上传数据，单张图片
            let body = new FormData(); //创建一个form表单
            body.append('key','avatar_file');
            body.append('file',{
                //设定上传的格式
                type:'multipart/form-data',
                //通过react-native-picker获取的图片地址
                uri:res.uri,
                name:'avatar_file',
            });
            console.log('这是我',body);
            let {memberAction} = this.props;
            memberAction.uploadImage(body);
            /* let file = {
                 uri:res.uri,
                 type:'multipart/form-data',
                 name:res.type
             };//这个对象里的key不能改变
             formDate.append("avatar_file",file);
            */

        })
    }

    //选择男女
    _changeSex(sex){
        if(sex=='man'){
            this.setState({
                isMan:true
            })
        } else {
            this.setState({
                isMan:false
            })
        }

    }

    //确定添加用户
    _addUser(){
        let message = '';
        if(!is.has(this.state.mobile)){
            message = "请输入手机号码"
        } else if(!is.mobile(this.state.mobile)){
            message = "请输入正确的手机号码"
        }
        if(message){
            Tips.showFail(message);
        } else {
            let sex = '';
            if(this.state.isMan){
                sex = "先生"
            } else {
                sex = "女士"
            }
            let info = {
                nick_name:this.state.name,
                mobile:this.state.mobile,
                sex:sex,
                avatar:'',
                birthday:this.state.birthday,
                card_date:this.state.cardDate,
                level:this.state.vipLevel,
                address:this.state.address,
                remark:this.state.note,
                user_id:this.props.user_id || ''

            }
            let {memberAction} = this.props;
            memberAction.addUser(info,(res)=>{
                if(res && res.status){
                    let message = ''
                    if(this.state.type=='add'){
                        message = '添加成功'
                    } else if(this.state.type == 'edit'){
                        message = '修改成功'
                    }
                    Tips.showSuccess(message);
                    setTimeout(() => {
                        Actions.push('MemberPage')
                    },1500)
                }
            });

        }
    }

    //充值方案列表渲染
    _renderBalanceList(rowData,index){
        return(
            <View style={[style.goodsItemBox]}>
                <TouchableWithoutFeedback onPress={()=>this._clickSelect(rowData)}>
                    <View style={[style.goodsItem, rowData.id == this.state.currentBalance.id ? style.goodsItemBoxActive : '']}>
                        <Text style={[style.goodsNo, rowData.id == this.state.currentBalance.id ? style.whiteText : '']}>
                            {rowData.name}
                        </Text>
                        <Text style={[style.goodsNames, rowData.id == this.state.currentBalance.id ? style.whiteText : '']}>
                            {rowData.title}
                        </Text>
                        <Text style={[style.goodsNum, rowData.id == this.state.currentBalance.id ? style.whiteText : '']}>
                            ￥{fen_to_yuan(rowData.payment_amount)}
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )

    }

    //点击item充值方案
    _clickSelect(item){
        this.setState({
            currentBalance: item
        })
    }
    //点击编辑会员
    _clickEditVip(){
     this.setState({
         type:'edit',
         isEditable:true
     })
    }
    //点击取消按钮返回上一页
    _backVipIndex(){
        Actions.push('MemberPage')
    }

    //优惠券列表渲染
    _renderCouponList(rowData,index){
        return(
            <View style={style.couponItem}>
                <Text numberOfLines={1}>
                    {rowData.discount.title}；{rowData.discount.label}
                </Text>
                <Text style={style.couponTime}>
                    {is.time(rowData.discount.usestart_at)}-{is.time(rowData.discount.useend_at)}
                </Text>
            </View>
        )
    }

    //渲染整个页面会员样式
    _renderAddUser(){
        let{memberState} = this.props;
        if(this.state.type == 'add' || this.state.type == 'edit'){
            return(
                <View style={style.editBox}>
                    <View>
                        <Image style={style.editImg} source={{uri: 'http://pic30.nipic.com/20130613/12074212_110133058344_2.jpg'}}></Image>
                        <Text style={style.editText} onPress={() => this._uploadAvatar()}>
                            修改照片
                        </Text>
                    </View>
                    <View style={style.editInfoBox}>
                        <View style={style.editInputItem}>
                            <Text style={style.editInputText}>
                                姓名
                            </Text>
                            <TextInput style={style.editInput}
                                       placeholder={"请输入姓名"}
                                       value={this.state.name}
                                       onChangeText={(name) =>this.setState({name})}
                            >

                            </TextInput>
                        </View>
                        <View style={style.editInputItem}>
                            <Text style={style.editInputText}>
                                电话
                            </Text>
                            <TextInput style={style.editInput}
                                       placeholder={"请输入手机号"}
                                       editable={this.state.isEdit}
                                       value={this.state.mobile}
                                       onChangeText={(mobile) =>this.setState({mobile})}
                            >

                            </TextInput>
                        </View>
                        <View style={style.editInputItem}>
                            <Text style={style.editInputText}>
                                生日
                            </Text>
                            <TextInput style={style.editInput}
                                       placeholder={"请输入生日"}
                                       editable={this.state.isEdit}
                                       value={this.state.birthday}
                                       onChangeText={(birthday) =>this.setState({birthday})}
                            >

                            </TextInput>
                        </View>
                    </View>
                    <View style={style.editGender}>
                        <TouchableWithoutFeedback onPress={() => this._changeSex('man')}>
                            <View>
                                <Text style={[style.genderItem, this.state.isMan ? style.genderItemActive : '']}>
                                    男士
                                </Text>
                            </View>
                        </TouchableWithoutFeedback>

                        <TouchableWithoutFeedback onPress={() => this._changeSex('woman')}>
                            <View>
                                <Text style={[style.genderItem, this.state.isMan ? '' : style.genderItemActive]}>
                                    女士
                                </Text>
                            </View>
                        </TouchableWithoutFeedback>

                    </View>
                </View>
            )
        } else if(this.state.type == 'detail'){
            return(
                <View>
                    <View style={style.userInfoBox}>
                        <Image style={style.userInfoImg} source={{uri:memberState.userDetail.avatar}}></Image>
                        <View style={style.userInfo}>
                            <View style={style.userInfoItem}>
                                <Text style={style.userInfoItemText}>
                                    姓名：
                                </Text>
                                <Text style={style.userInfoItemTextRed}>
                                    {memberState.userDetail.nick_name}
                                </Text>
                            </View>
                            <View style={style.userInfoItem}>
                                <Text style={style.userInfoItemText}>
                                    电话：
                                </Text>
                                <Text style={style.userInfoItemTextRed}>
                                    {memberState.userDetail.mobile}
                                </Text>
                            </View>
                            <View style={style.userInfoItem}>
                                <Text style={style.userInfoItemText}>
                                    生日：
                                </Text>
                                <Text style={style.userInfoItemTextRed}>
                                    {memberState.userDetail.birthday}
                                </Text>
                            </View>
                        </View>
                        <View style={style.userDiscountInfo}>
                            <View style={style.discountItem}>
                                <Text style={style.discountName}>
                                    余额
                                </Text>
                                <Text>
                                    {fen_to_yuan(memberState.userDetail.balance)}
                                </Text>
                            </View>
                            <View style={style.discountItem}>
                                <Text style={style.discountName}>
                                    积分
                                </Text>
                                <Text>
                                    {memberState.userDetail.point}
                                </Text>
                            </View>
                            <View style={[style.discountItem, {borderRightWidth: 0}]}>
                                <Text style={style.discountName}>
                                    优惠券
                                </Text>
                                <TouchableWithoutFeedback onPress={() => this._showLeftCouponModal()}>
                                    <View>
                                        <Text style={style.discountValue}>
                                            {memberState.userDetail.coupons}
                                        </Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            </View>
                        </View>
                    </View>
                    <View style={style.editUserInfo}>
                        <TouchableWithoutFeedback onPress={() => this._clickEditVip()}>
                            <View>
                                <Text style={style.editUserInfoBtn}>
                                    编辑会员
                                </Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={()=>this._clickHistoryOrder()}>
                            <View>
                                <Text style={style.userOrder}>
                                    历史充值订单 》
                                </Text>
                            </View>
                        </TouchableWithoutFeedback>


                        <TouchableWithoutFeedback onPress={()=>this._clickHistoryOrder()}>
                            <View>
                                <Text style={style.userOrder}>
                                    历史订单 》
                                </Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
            )

        }
    }
    //渲染下面的按钮
    _renderBtn(){
        let{memberState} = this.props;
        if(this.state.type == 'add' || this.state.type == 'edit'){
            return(
                <View style={style.detailBtn}>
                    <TouchableOpacity onPress={() => {this._backVipIndex()}}>
                        <Text style={style.btnItem}>
                            取消
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=> this._addUser()}>
                        <Text style={[style.btnItem, style.btnItemActive]}>
                            确定
                        </Text>
                    </TouchableOpacity>
                </View>
            )
        } else if(this.state.type == 'detail'){
            return(
                <TouchableOpacity onPress={() => this._showType()}>
                    <Text style={[style.btnItem, style.btnItemActive]}>
                        余额充值
                    </Text>
                </TouchableOpacity>
            )
        }
    }
    //点击历史订单详情
    _clickHistoryOrder(){
        Actions.push('OrderPage',{
            user_id:this.props.user_id
        })

    }



    render() {
        let{memberState} = this.props;
        return (
            <View>
                <StatusBar hidden={true}/>
                <View style={style.body}>
                    <View style={style.content}>
                        {this._renderAddUser()}
                        {/*通用样式*/}
                        <View style={style.userInfoWrap}>
                            <View style={[style.editInputItem, {paddingRight: 100}]}>
                                <Text style={[style.editInputText]}>
                                    开卡日期
                                </Text>
                                <TextInput
                                    style={style.editInput}
                                    value={this.state.cardDate}
                                    editable={false}
                                >
                                </TextInput>
                            </View>
                            <View style={style.editInputItem}>
                                <Text style={style.editInputText}>
                                    会员等级
                                </Text>
                                <TextInput style={style.editInput}
                                           value={this.state.vipLevel}
                                           editable={false}
                                >
                                </TextInput>
                            </View>
                        </View>
                        <View style={style.userInfoWrap} >
                            <View style={[style.editInputItem]}>
                                <Text style={[style.editInputText]}>
                                    联系地址
                                </Text>
                                <TextInput style={style.editInput}
                                           value={this.state.address}
                                           placeholder={"请输入联系地址"}
                                           editable={this.state.isEditable}
                                        onChangeText={(address) => this.setState({address})}

                                >
                                </TextInput>
                            </View>
                        </View>
                        <View style={[style.userInfoWrap]}>
                            <View style={[style.editInputItem,{alignItems: 'flex-start'}]}>
                                <Text style={[style.editInputText]}>
                                    备注信息
                                </Text>
                                <TextInput style={style.editInputArea}
                                           multiline = {true}
                                           textAlignVertical={'top'}
                                           onChangeText={(note) =>this.setState({note})}
                                           editable={this.state.isEditable}
                                           value={this.state.note}
                                >

                                </TextInput>
                            </View>
                        </View>
                    </View>
                    <View style={style.detailBtn}>
                        {this._renderBtn()}

                </View>
                </View>



                {/*左侧会员优惠券弹出*/}
                <View>
                    <Modal
                        ref={"leftCouponModal"}
                        position="top"
                        style={{backgroundColor:'transparent', alignItems: 'flex-end'}}
                        coverScreen={true}
                        swipeToClose={false}
                    >
                        <View style={style.leftModalBox}>
                            <View>
                                <Text style={{color: '#4A4A4A', fontSize: 14, marginTop: 30, paddingLeft: 20}}>
                                    会员信息:
                                </Text>
                                <View style={style.couponUserName}>
                                    <Text style={{fontSize: 24, color: '#202020', marginRight: 60, paddingLeft: 20}}>{memberState.userDetail.nick_name}</Text>
                                    <Text style={{fontSize: 24, color: '#202020'}}>{memberState.userDetail.mobile}</Text>
                                </View>
                                <View style={style.closeIcon}>
                                    <TouchableWithoutFeedback onPress={() => this._closeLeftCouponModal()}>
                                        <CXIcon name='guanbi' color='#909090' size={30}>

                                        </CXIcon>
                                    </TouchableWithoutFeedback>
                                </View>
                            </View>
                            <View style={style.couponBox}>
                                <View>
                                    <Text style={style.couponText}>
                                        可用优惠券：
                                    </Text>
                                </View>
                                <ScrollView style={{height: 450}}>
                                    <FlatList
                                        numColumns={3}
                                        columnWrapperStyle={{flexDirection: 'row'}}
                                        keyExtractor={(item, index) => index.toString()}
                                        data={memberState.couponList}
                                        renderItem={({item,index}) => this._renderCouponList(item,index)}
                                        extraData={memberState.couponList}
                                        onEndReached = {()=> this._onLoadMore()}
                                        onEndReachedThreshold={0.1}
                                    >
                                    </FlatList>
                                </ScrollView>
                            </View>
                        </View>
                    </Modal>
                </View>


                {/*充值方案弹窗*/}
                <View>
                    <Modal
                        ref={"searchModal"}
                        position="center"
                        style={{backgroundColor:'transparent',alignItems:'center', justifyContent: 'center'}}
                        coverScreen={true}
                        swipeToClose={false}
                    >
                        <View style={style.searchModalBox}>
                            <View style={style.searchTitle}>
                                <Text>
                                    充值方案
                                </Text>
                                <View style={[style.closeIcon, {right: 0, top: 0}]}>
                                    <TouchableWithoutFeedback onPress={() => this._closeType()}>
                                        <CXIcon name='guanbi' color='#909090' size={30}>

                                        </CXIcon>
                                    </TouchableWithoutFeedback>
                                </View>
                            </View>

                            <View style={style.searchGoods}>
                                <View style={style.searchScrollView}>
                                    <FlatList
                                        numColumns={3}
                                        columnWrapperStyle={{flexDirection: 'row'}}
                                        extraData={memberState.balanceList}
                                        data={memberState.balanceList}
                                        keyExtractor={(item, index) => index.toString()}
                                        renderItem={({item,index}) => this._renderBalanceList(item,index)}
                                    >
                                    </FlatList>
                                </View>
                            </View>
                            <View style={style.submitBtn}>
                                <TouchableWithoutFeedback onPress={() => this._submitBalanceOrder()}>
                                    <View>
                                        <Text style={style.submitBtnText}>
                                            确定充值
                                        </Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            </View>
                        </View>
                    </Modal>
                </View>
            </View>
        )
    }
}

const style = StyleSheet.create({
    body: {
      height: '100%',
      backgroundColor: white,
        alignItems: 'center'
    },
    content: {
        width: 790,
        paddingTop: 50
    },
    editBox: {
        flexDirection: 'row',
        alignItems: 'flex-start'
    },
    editImg: {
        position: 'relative',
        width: 160,
        height: 180,
        borderWidth: 1,
        borderColor: '#979797'
    },
    editText: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(75, 138, 242, .8)',
        lineHeight: 40,
        color: white,
        textAlign: 'center'
    },
    editInfoBox: {
        flex: 1,
        marginLeft: 50,
        height: 180,
        justifyContent: 'space-between',
    },
    editInputItem: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
    },
    editInput: {
        flex: 1,
      borderBottomWidth: 1,
        // lineHeight: 30,
        height: 40,
        borderColor: '#D8D8D8',
        paddingLeft: 30
    },
    editInputArea: {
        height: 130,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#D7D7D7',
        backgroundColor: '#F3F3F3',
        flex: 1,
        paddingVertical: 20,
        paddingHorizontal: 30,
        textAlignVertical: 'top'
    },
    editInputText: {
        fontSize: 16,
        color: '#4A4A4A',
        marginRight: 20
    },
    editGender: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    genderItem: {
        width: 80,
        lineHeight: 35,
        borderColor: '#909090',
        borderWidth: 1,
        borderRadius: 4,
        textAlign: 'center',
        marginLeft: 30,
        marginTop: 10
    },
    genderItemActive: {
        borderColor: mainBackgroundColor,
        color: mainBackgroundColor
    },

    userInfoBox: {
      flexDirection: 'row',

    },
    userInfoImg: {
        width: 120,
        height: 120,
        borderWidth: 1,
        borderColor: '#979797'
    },
    userInfo: {
        height: 120,
        flex: 1,
        marginLeft: 40,
        justifyContent: 'space-between',
    },
    userInfoItem: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    userInfoItemText: {
        fontSize: 16,
        color: '#4A4A4A'
    },
    userInfoItemTextRed: {
        fontSize: 16,
        color: mainBackgroundColor
    },
    userDiscountInfo: {
        flexDirection: 'row',
        height: 60
    },
    discountItem: {
        paddingHorizontal: 40,
        borderRightWidth: 1,
        borderColor: '#D7D7D7',
        alignItems: 'center'
    },
    discountName: {
        fontSize: 16,
        fontWeight: '500',
        color: '#202020',
        marginBottom: 20
    },
    discountValue: {
        color: '#4B8AF2'
    },
    editUserInfo: {
        paddingVertical: 16,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderColor: '#D8D8D8',
        marginTop: 20
    },
    editUserInfoBtn: {
        borderWidth: 1,
        borderColor: '#4B8AF2',
        borderRadius: 4,
        textAlign: 'center',
        lineHeight: 40,
        color: '#4B8AF2',
        width: 120
    },
    userOrder: {
        color: '#4B8AF2',
        fontSize: 16,
        fontWeight: '500'
    },


    userInfoWrap: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 20
    },

    detailBtn: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        height: 90,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: white,
        borderTopWidth: 1,
        borderColor: '#DBDBDB'
    },
    btnItem: {
        width: 160,
        lineHeight: 44,
        color: white,
        borderRadius: 4,
        textAlign: 'center',
        backgroundColor: '#909090',
        marginHorizontal: 40
    },
    btnItemActive: {
        backgroundColor: mainBackgroundColor
    },


    // 优惠券弹出部分
    leftModalBox: {
        width: 875,
        height: 720,
        backgroundColor: white,
        paddingHorizontal: 30,
        paddingBottom: 30
    },
    closeIcon: {
        position: 'absolute',
        right:-30,
        top: 0,

    },
    couponBox: {
      backgroundColor: '#F3F3F3',
        padding: 20,
        marginTop: 15
    },
    couponUserName: {
        flexDirection: 'row',
        marginTop: 14
    },
    couponItemBox: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    couponTime: {
        fontSize: 10,
        color: '#4A4A4A',
        marginTop: 5
    },
    couponText: {
        color: '#909090',
        fontSize: 14,
        marginBottom: 20
    },
    couponItem: {
        backgroundColor: white,
        borderRadius: 4,
        paddingRight: 20,
        paddingLeft: 20,
        paddingTop: 10,
        paddingBottom: 10,
        marginRight: 20,
        marginBottom: 20,
        width:'33.3%'
    },


    // 搜索弹窗部分
    searchModalBox: {
        width: 900,
        backgroundColor: white,
        borderRadius: 4,
        /*height:"100%"*/
    },
    searchTitle: {
        height: 60,
        justifyContent: 'center',
        paddingLeft: 30,
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8'
    },
    searchGoods: {
        paddingVertical: 30,
        paddingHorizontal: 10
    },
    searchScrollView: {
        height: 280,
    },
    goodsItemBox: {
        width: '33%',
        marginBottom: 10,
        paddingHorizontal: 10
    },
    goodsItemBoxActive: {
      backgroundColor: mainBackgroundColor,
      borderColor: mainBackgroundColor
    },
    whiteText: {
      color: white
    },
    goodsItem: {
        padding: 10,
        backgroundColor: '#F3F3F3',
        borderWidth: 1,
        borderColor: '#D7D7D7',
        borderRadius: 4,
        height: 120,
    },
    goodsNo: {
        fontSize: 16,
        color: '#4A4A4A',
        fontWeight: 'bold'
    },
    goodsNames: {
        fontSize: 12,
        color: '#4A4A4A',
        marginTop: 5
    },
    goodsNum: {
        color: mainBackgroundColor
    },

    submitBtn: {
        height: 90,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#202020'
    },
    submitBtnText: {
        width: 190,
        lineHeight: 50,
        textAlign: 'center',
        color: white,
        backgroundColor: mainBackgroundColor,
        borderRadius: 4
    }

});

export default connect(state =>({
    memberState: state.member,
    storeState: state.store
}),dispatch =>({
    memberAction: bindActionCreators(memberActions,dispatch),
    storeAction: bindActionCreators(storeActions, dispatch)
}))(memberDetailPage);
